<template>
	<view>
		<view :style="'heihgt:' + statusBarHeight + 'px;'"></view>
		<view class="flex align-center" style="height: 44px;">
			<view class="flex align-center justify-center animated fast" style="height: 44px;width: 44px;" hover-class="text-main pulse">
				<text class="iconfont iconfanhui font-lg"></text>
			</view>
		</view>
		<view>
			<view class="flex align-center justify-center" style="margin-top: 120rpx; margin-bottom: 80rpx;">
				<text class="flex font-lg font-weight-bold">欢迎回来</text>
			</view>
			<view class="px-4">
				<input type="text" class="uni-input bg-light rounded mb-4" placeholder="手机号/用户名/邮箱"/>
				<input type="text" class="uni-input bg-light rounded mb-4" placeholder="请输入密码" />
				<input v-if="type === 'reg'" type="text" class="uni-input bg-light rounded mb-4" placeholder="请输入密码" />
			</view>
		</view>
		<button type="default" style="background-color: #FB85A7;color:#fff;margin: 35rpx;">{{type === "login" ? 登录 : 注册}}</button>
		<view class="flex justify-center align-center">
			<view style="height: 1rpx;width: 100rpx; background-color: #E3E1DD;"></view>
			<view class="text-light-muted font mx-2">社交账号登录</view>
			<view style="height: 1rpx;width: 100rpx; background-color: #E3E1DD;"></view>
		</view>
		<view class="flex align-center py-5">
			<view class="flex-1 flex align-center justify-center">
				<view class="rounded-circle bg-light flex align-center justify-center" style="width: 100rpx; height: 100rpx;" >
					<text class="iconfont iconweixin"></text>
				</view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="rounded-circle bg-light flex align-center justify-center" style="width: 100rpx; height: 100rpx;" >
					<text class="iconfont iconQQ"></text>
				</view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="rounded-circle bg-light flex align-center justify-center" style="width: 100rpx; height: 100rpx;" >
					<text class="iconfont iconxinlangweibo"></text>
				</view>
			</view>
		</view>
		
		<view class="flex justify-center align-center">
			<view class="text-light-muted font-sm" @click="changeType">去注册</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				type: "login",
				statusBarHeight:0
			};
		},
		onLoad() {
		  // 获取状态栏高度
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";	  
		},
		methods: {
			changeType() {
				this.type = this.type === "login" ? "reg" : "login";
			}
		}
	}
</script>

<style>
</style>
